<template>
	<router-layout>
	<div class="pageBg">
		<div class="header">
			<van-icon name="arrow-left" class="back" @click="routerBack" />
				乘客删除
		</div>
		<div @click="toAddPassEnger">
			<van-empty
				image="search" 
				image-size="100" 
				description="暂无乘客去添加"  
				class="nopassEnger"
				v-show="!hasPassEnger"
			/>
		</div>
		<div @click="timeOutreGet">
			<van-empty
				image="network" 
				image-size="100" 
				description="网络超时请点击重试"  
				class="nopassEnger" 
				v-show="timeOut" 
			/>
		</div>
		<van-loading color="#1989fa" type="spinner"  class="passengerLoad" v-if="loading" />
		<div v-else>
			<div class="passList" v-for="item,index in PassEnger" :key="index">
				<div>
					<h2>{{item.name}}</h2>
					<p>{{formatIdcard(item.id_card)}}</p>
				</div>
				<div @click="del(item)">
					<img src="@/assets/images/searchBus/delete1.png"/>
				</div>
			</div>
		</div>
	</div>
	<TabBar  ref="tabbar"></TabBar>
	</router-layout>
</template>

<script>
	import authMixin from '@/mixin/mixin'
	import TabBar from '@/components/common/tabbar/tabbar'
	export default {
		data() {
			return {
				PassEnger: [],
				loading:false,
				timeOut:false,
				hasPassEnger:true
			}
	  },
		mixins:[authMixin],
		components:{
			TabBar
		},
		created(){
			this.getPassEnger()
		},
		methods:{
			formatIdcard(idcard){
				return idcard.substr(0,6) + '****' + idcard.substring(idcard.length-5)
			},
			del(item){
				this.$dialog.confirm({
				  message: '是否删除该乘客'
				}).then(()=>{
					this.$toast.loading({
						 forbidClick:true,
						 duration:0,
						 loadingType: 'spinner'
					})
					this.$request({
						method: 'post',
						url: '/idcard/del',
						data:{
							id: item.id
						}
					}).then(res=>{
						this.$toast.clear()
						this.$toast.success({
							 message:res.msg,
							 forbidClick:true,
							 duration:200,
						})
						this.PassEnger = []
						this.getPassEnger()
						console.log(res)
					})
					
				}).catch(err=>{
					console.log(err)
				})
			},
			timeOutreGet(){
				this.getPassEnger()
			},
			getPassEnger() {
				this.loading = true
				this.timeOut = false
				//乘客获取
				this.$request({
					method: 'post',
					url: '/idcard/index'
				}).then(res => {
					if(res.data && res.data.length){
						res.data.forEach(item => {
							let pushObj = `{
									 "id": "${item.id}",
									 "id_card": "${item.id_card}",
									 "mobile": "${item.mobile}",
									 "name": "${item.name}",
									 "sex": "${item.sex}",
									 "ticket_type": "${item.ticket_type}"
								}`;
							this.PassEnger.push(JSON.parse(pushObj));
						});
						this.PassEnger = JSON.parse(JSON.stringify(this.PassEnger))
						this.loading = false
						this.hasPassEnger = true
					}else{
						this.PassEnger = []
						this.loading = false
						this.hasPassEnger = false
					}
				}).catch(err=>{
					if(err.message.includes('timeout')){
						this.timeOut = true
						this.loading = false
						this.hasPassEnger = true
					}
				})
			},
			routerBack(){
				this.$router.back()
			},
			toAddPassEnger(){
				this.$emit('toAddPassEnger')
			}
		}
}
</script>

<style scoped>
	.passList{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: .3rem .3rem;
		border-bottom: 0.02667rem solid #ebedf0;
	}
	.passList >div{
		height:100%;
	}
	.passList  h2{
		font-size: .38rem;
		color: #4088ee;
		margin-bottom: .2rem;
		display: block;
		font-weight: normal;
	}
	.passList  p{
		font-size: .36rem;
		color: #999;
		display: block;
		font-weight: normal;
	}
	.passList  img{
		height: .5rem;
	}
	.passengerLoad{
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.header{
		position: relative;
		display: flex;
		align-items: center;
		padding: .25rem 0;
		background: #fff;
		margin-bottom: .3rem;
		justify-content: center;
		font-size: 0.4rem;
	}
	.header .back{
		display: block;
		position: absolute;
		left:.3rem;
		top:50%;
		transform: translate(-50%,-50%);
	}
</style>
